<template>
  <div class="vue-container">
    <common-form
      ref="commonForm"
      :disabled="disabled"
      :options="options"
      @handlerClick="handlerClick"
      @advancedSearch="handlerQuery"
    >
      <template slot="advanced-content">
        <el-form ref="advancedForm" style="margin-top: 20px;" :model="queryForm" label-width="80px">
          <el-form-item label="操作人">
            <el-input v-model="queryForm.createUsername" clearable placeholder="请输入操作人" />
          </el-form-item>
          <el-form-item label="拉黑类型">
            <el-select v-model="queryForm.type" clearable style="width: 100%;" placeholder="请选择拉黑类型">
              <el-option
                v-for="(item, index) in typeList"
                :key="index"
                :label="item.label"
                :value="Number(item.code)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="拉黑状态">
            <el-select v-model="queryForm.status" clearable style="width: 100%;" placeholder="请选择拉黑状态">
              <el-option
                v-for="(item, index) in statusList"
                :key="index"
                :label="item.label"
                :value="Number(item.code)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="queryForm.createTime"
              style="width: 100%;"
              type="datetimerange"
              placeholder="选择时间"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-form>
      </template>
    </common-form>
    <common-table
      :table-data="data"
      :columns="columns"
      :height="height"
      :current-page="queryForm.pageNum"
      :page-size="queryForm.pageSize"
      :total="totalPage"
      :loading="loading"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @handleSelectionChange="handleSelectionChange"
    >
      <!-- 列表序号 -->
      <template #serialNumber="scope">
        <span>{{
          Number(scope.index + 1) + (queryForm.pageNum - 1) * queryForm.pageSize
        }}</span>
      </template>
      <!-- 拉黑类型 #1：账号, 2：IP -->
      <template #type="scope">
        <template v-for="(item, index) in typeList">
          <el-tag
            v-if="scope.row.type === Number(item.code)"
            :key="index"
            :type="scope.row.type === 1 ? '' : 'success'"
          >{{ item.label }}</el-tag>
        </template>
      </template>
      <!-- 关联信息 -->
      <template #relevanceData="scope">
        <span v-if="scope.row.type === 1">拉黑账号:  <el-tag>{{ scope.row.relevanceData }}</el-tag></span>
        <span v-if="scope.row.type === 2">拉黑IP: <el-tag type="success">{{ scope.row.relevanceData }}</el-tag></span>
      </template>
      <!-- 拉黑结束时间 -->
      <template #endTime="scope">
        <span v-if="scope.row.endTime === 0"><el-tag type="danger">永久拉黑</el-tag></span>
        <span v-else>{{ scope.row.endTime | formatTime }}</span>
      </template>
      <!-- 拉黑状态 -->
      <template #status="scope">
        <template v-for="(item, index) in statusList">
          <el-tag
            v-if="scope.row.status === Number(item.code)"
            :key="index"
            :type="scope.row.status === 1 ? 'danger' : 'info'"
          >{{ item.label }}</el-tag>
        </template>
      </template>
      <!-- 操作时间 -->
      <template #createTime="scope">
        {{ scope.row.createTime | formatTime }}
      </template>
      <!-- 列表操作按钮 -->
      <template #operation="scope">
        <el-button
          v-throttle
          v-permission="'ops:blacklist:update'"
          :size="size"
          type="text"
          icon="el-icon-edit-outline"
          @click.stop="handlerSave(scope.row)"
        >编辑</el-button><br>
        <el-button
          v-throttle
          v-permission="'ops:blacklist:del'"
          :size="size"
          type="text"
          icon="el-icon-delete"
          class="danger-btn"
          @click.stop="handlerDel(funs['del'], scope.row)"
        >移出黑名单</el-button>
      </template>
    </common-table>
    <!-- 新增or编辑组件 -->
    <add-to-blacklist ref="addOrUpdate" @ok="getList" />
  </div>
</template>
<script>
import { mixin } from '@/views/pages/mixin'
import AddToBlacklist from '@/components/AddToBlacklist'
export default {
  name: 'Blacklist',
  components: {
    AddToBlacklist
  },
  mixins: [mixin],
  data() {
    return {
      typeList: [], // 拉黑类型 #1：账号, 2：IP数组
      statusList: [], // 拉黑状态 #1：拉黑中, 2：已失效
      // 表头数组
      columns: [
        {
          type: 'selection',
          width: '60'
        },
        {
          prop: 'number',
          label: '序号',
          width: '70',
          type: 'slot',
          slotType: 'serialNumber'
        },
        {
          prop: 'type',
          align: 'center',
          type: 'slot',
          slotType: 'type',
          label: '拉黑类型'
        },
        {
          prop: 'relevanceData',
          align: 'center',
          type: 'slot',
          slotType: 'relevanceData',
          label: '关联信息'
        },
        {
          prop: 'endTime',
          align: 'center',
          type: 'slot',
          slotType: 'endTime',
          label: '拉黑结束时间'
        },
        {
          prop: 'status',
          align: 'center',
          type: 'slot',
          slotType: 'status',
          label: '拉黑状态'
        },
        {
          prop: 'createUsername',
          align: 'center',
          label: '操作人'
        },
        {
          prop: 'createTime',
          align: 'center',
          type: 'slot',
          slotType: 'createTime',
          label: '操作时间'
        },
        {
          type: 'slot',
          prop: 'operation',
          label: '操作',
          width: '168',
          slotType: 'operation',
          align: 'center',
          fixed: 'right'
        }
      ],
      // 顶部表单按钮组
      options: [{
        type: 'button',
        icon: 'el-icon-refresh',
        handler: 'handlerRefresh',
        float: 'left',
        class: 'refreshBtn',
        text: '刷新'
      },
      {
        type: 'button',
        icon: 'el-icon-plus',
        handler: 'handlerSave',
        float: 'left',
        btnType: 'primary',
        permission: 'create',
        text: '新增'
      },
      {
        type: 'button',
        icon: 'el-icon-download',
        handler: 'handlerExport',
        permission: 'export',
        btnType: 'info',
        float: 'left',
        text: '导出'
      },
      {
        type: 'button',
        icon: 'el-icon-delete',
        handler: 'handlerDels',
        disabled: true,
        class: 'deleteBtn',
        permission: 'batch:del',
        text: '移出黑名单',
        float: 'left'
      },
      {
        type: 'button',
        handler: 'handlerAdvanced',
        permission: 'page',
        class: 'refreshBtn',
        advanced: true,
        float: 'right',
        text: '高级查询'
      },
      {
        type: 'button',
        handler: 'handlerReset',
        permission: 'page',
        float: 'right',
        class: 'infoBtn',
        text: '重置'
      },
      {
        type: 'button',
        handler: 'handlerQuery',
        permission: 'page',
        float: 'right',
        text: '查询',
        btnType: 'primary'
      },
      {
        type: 'search',
        handler: 'handlerQuery',
        permission: 'page',
        bindValue: '',
        float: 'right',
        label: 'keyword',
        placeholder: '输入关键字搜索'
      }
      ]
    }
  },
  async created() {
    // 通过全局方法取数据字典
    this.typeList = await this.getDictInfo('blacklist_type')
    this.statusList = await this.getDictInfo('blacklist_status')
  },
  methods: {
    // 打开保存弹窗
    handlerSave(item) {
      if (item) {
        item.disabledType = true
        item.disabledData = true
      }
      this.$refs.addOrUpdate.openDialog(item)
    },
    // 多选删除
    handlerDels() {
      this.handlerDel(this.funs['batchDel'])
    },
    // 删除
    handlerDel(del, item) {
      const id = item ? item.id : this.ids
      this.$confirm('此操作会将选中数据移出黑名单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        del(id).then(() => {
          this.$message({ type: 'success', message: '操作成功!' })
          this.getList(item)
          if (this.ids.length) this.disabled = false
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {})
    }
  }
}
</script>
